<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="积分规则配置">
        <div>
          配置积分获取规则和抵扣规则及成长值获取规则，用户购买商品时可根据积分规则进行抵扣金额或者获取积分和成长值。
        </div>
        <div class="rule">
          <div class="title">积分获取规则</div>
          <div class="consume">
            用户消费
            <a-input-number
              :style="inputStyle"
              min="0"
              v-model:value="formData.deductionRate"
              :precision="0"
              size="small"
            />元，可获取1积分
          </div>
        </div>
        <div class="rule">
          <div class="title">积分使用规则</div>
          <div class="consume">
            用户使用1积分可抵扣<a-input-number
              :style="inputStyle"
              v-model:value="formData.pointRate"
              size="small"
              min="0"
              :precision="0"
            />元
          </div>
        </div>
        <div class="rule">
          <div class="title">成长值获取规则</div>
          <div class="consume">
            用户消费1元可获得<a-input-number
              :style="inputStyle"
              v-model:value="formData.growthRate"
              min="0"
              :precision="0"
              size="small"
            />成长值
          </div>
        </div>
        <div style="margin-top: 20px; display: flex; justify-content: center">
          <a-button type="primary" @click="handleSave">保存</a-button>
        </div>
      </a-card>
    </a-space>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { getIntegral, saveIntegral } from "@/api/sysConfig";
const formData = ref({
  deductionRate: undefined,
  pointRate: undefined,
  growthRate: undefined,
});
const inputStyle = reactive({
  width: "100px",
  margin: " 0 10px",
});
function getIntegralList() {
  getIntegral({}).then((res) => {
    if (res.code === 200) {
      formData.value = res.data;
    }
  });
}
const handleSave = () => {
  saveIntegral(formData.value).then((res) => {
    if (res.code === 200) {
      getIntegralList();
    }
  });
};
onMounted(() => {
  getIntegralList();
});
</script>
<style lang="less" scoped>
.rule {
  padding: 10px;
  background: #ececec;
  margin-top: 25px;
  .title {
    font-weight: bold;
  }
  .consume {
    margin-top: 10px;
  }
}
</style>
